<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import {debounce} from '@/utils'

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '300px'
      },
      chartData: {
        type: Object
      }
    },
    watch: {
      chartData(value) {
        this.initChart();
      }
    },
    data() {
      return {
        chart: null,

      }
    },
    mounted() {
      this.initChart()
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        let options = {
          title: {
            text: this.chartData.name
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.chartData.xAxis
          },
          yAxis: {
            min: this.chartData.min, //取最小值为最小刻度
            max: this.chartData.max, //取最大值为最大刻度
            scale: true, //自适应
            // minInterval: 0.1, //分割刻度
            axisLabel: {
              // color: "#58f371",
              fontSize: 13,
              showMinLabel: false,//不显示最小刻度线值
              showMaxLabel: false //不显示最大刻度线值
            },
            axisLine: {
              lineStyle: {
                // color: "#58f371", //最左侧Y轴颜色
              }
            },
            splitLine: { //多条横线
              show: false
            }
          },
          series: [
            {
              name: this.chartData.tilemap,
              type: 'line',
              data: /*this.chartData.data*/[],
              smooth: false,
              markPoint: {},
              itemStyle: {
                normal: {
                  color: "#1bdaf8", //折线点的颜色
                  lineStyle: {
                    color: "#03d193" //折线的颜色
                  }
                }
              },
              markLine: {
                data: [
                  {
                    silent: true, //鼠标悬停事件  true没有，false有
                    lineStyle: {
                      //警戒线的样式  ，虚实  颜色
                      type: "dashed",
                      color: "#FA3934",
                    },
                    label: {
                      position: "end",
                      formatter: 'UCL' + "=" + this.chartData.ucl, // 名称
                      fontSize: 14
                      //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                    },
                    yAxis: this.chartData.ucl, // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                  },
                  {
                    silent: true, //鼠标悬停事件  true没有，false有
                    lineStyle: {
                      //警戒线的样式  ，虚实  颜色
                      type: "dashed",
                      color: "#FA3934",
                    },
                    label: {
                      position: "end",
                      formatter: 'CL' + "=" + this.chartData.ct, // 名称
                      fontSize: 14
                      //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                    },
                    yAxis: this.chartData.ct, // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                  },
                  {
                    silent: true, //鼠标悬停事件  true没有，false有
                    lineStyle: {
                      //警戒线的样式  ，虚实  颜色
                      type: "dashed",
                      color: "#FA3934",
                    },
                    label: {
                      position: "end",
                      formatter: 'LCL' + "=" + this.chartData.lcl, // 名称
                      fontSize: 14
                      //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                    },
                    yAxis: this.chartData.lcl, // 警戒线的标注值，可以有多个yAxis,多条警示线   或者采用   {type : 'average', name: '平均值'}，type值有  max  min  average，分为最大，最小，平均值
                  },
                ],
              }
            }
          ]
        }
        let arr = this.chartData.abnormals
        //改变特点点颜色
        if (arr && arr.length > 0) {
          for (let i = 0; i < this.chartData.data.length; i++) {
            let obj = {};
            if (arr.includes(i)) {
              obj = {
                value: this.chartData.data[i],
                symbolSize: 10,//拐点大小
                symbol: 'circle',//拐点样式 ,
                itemStyle: {
                  color: "#FA3934", //拐点颜色
                }
              }
            } else {
              obj = {
                value: this.chartData.data[i],
                symbol: 'circle',//拐点样式 ,
                itemStyle: {
                  color: "#1bdaf8", //拐点颜色
                }
              }
            }
            options.series[0].data.push(obj)
          }
        } else {
          options.series[0].data = this.chartData.data
        }
        this.chart.setOption(options)

      }
    }
  }
</script>
